<!DOCTYPE html>
<html lang="zh">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="csrf-token" content="{{ csrf_token() }}">
  <title>{% block title %}期末成绩登记统计分析系统{% endblock %}</title>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
  <link rel="icon"
    href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 512'><path d='M622.34 153.2L343.4 67.5c-15.2-4.67-31.6-4.67-46.79 0L17.66 153.2c-23.54 7.23-23.54 38.36 0 45.59l48.63 14.94c-10.67 13.19-17.23 29.28-17.88 46.9C38.78 266.15 32 276.11 32 288c0 10.78 5.68 19.85 13.86 25.65L20.33 428.53C18.11 438.52 25.71 448 35.94 448h56.11c10.24 0 17.84-9.48 15.62-19.47L82.14 313.65C90.32 307.85 96 298.78 96 288c0-11.57-6.47-21.25-15.66-26.87.76-15.02 8.44-28.3 20.69-36.72L296.6 284.5c9.06 2.78 26.44 6.25 46.79 0l278.95-85.7c23.55-7.24 23.55-38.36 0-45.6zM352.79 315.09c-28.53 8.76-52.84 3.92-65.59 0l-145.02-44.55L128 384c0 35.35 85.96 64 192 64s192-28.65 192-64l-14.18-113.47-145.03 44.56z'/></svg>"
    type="image/svg+xml">
  <style>
    :root {
      --primary-blue: #1976D2;
      --light-blue: #E3F2FD;
      --accent-blue: #039BE5;
      --text-primary: #2c3e50;
      --text-secondary: #546E7A;
      --border-radius: 6px;
      --transition-speed: 0.3s;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      font-family: 'Microsoft YaHei', sans-serif;
      background-color: #f5f7fa;
    }

    .navbar {
      position: fixed !important;
      background: rgba(25, 118, 210, 0.95);
      backdrop-filter: blur(10px);
      padding: 15px 30px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: white;
      box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1000;
      transition: all var(--transition-speed) ease;
      height: 70px;
    }

    .system-name {
      font-size: 20px;
      font-weight: bold;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .system-name i {
      font-size: 24px;
      transition: transform var(--transition-speed) ease;
    }

    .system-name:hover i {
      transform: rotate(15deg);
    }

    .system-name a {
      text-decoration: none;
      color: white;
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .system-name a:hover {
      color: white;
    }

    .avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 10px;
      background-color: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .avatar i {
      font-size: 20px;
      color: var(--primary-blue);
    }

    .user-info {
      position: relative;
      cursor: pointer;
      padding: 8px 16px;
      border-radius: var(--border-radius);
      transition: all var(--transition-speed) ease;
      background: rgba(255, 255, 255, 0.1);
      display: flex;
      align-items: center;
      gap: 10px;
      height: 40px;
    }

    .user-info .avatar {
      width: 32px;
      height: 32px;
      border-radius: 50%;
      background: rgba(255, 255, 255, 0.2);
      display: flex;
      align-items: center;
      justify-content: center;
      overflow: hidden;
      border: 2px solid rgba(255, 255, 255, 0.3);
    }

    .user-info .avatar img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .user-info .avatar i {
      font-size: 16px;
      color: white;
    }

    .user-info .user-name {
      display: flex;
      align-items: center;
      gap: 5px;
    }

    .user-info .user-name span {
      font-size: 14px;
    }

    .user-info .user-name .dropdown-arrow {
      font-size: 12px;
      transition: transform var(--transition-speed) ease;
    }

    .user-info:hover .user-name .dropdown-arrow {
      transform: rotate(180deg);
    }

    .user-info:hover {
      background: rgba(255, 255, 255, 0.2);
      transform: translateY(-1px);
    }

    .user-info .dropdown {
      display: none !important;
      position: absolute !important;
      right: 0 !important;
      top: calc(100% + 10px) !important;
      background: rgba(255, 255, 255, 0.98) !important;
      backdrop-filter: blur(10px) !important;
      min-width: 180px !important;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
      border-radius: var(--border-radius) !important;
      z-index: 1001 !important;
      transform-origin: top right !important;
      transform: scale(0.95) !important;
      opacity: 0 !important;
      transition: all var(--transition-speed) ease !important;
    }

    .user-info:hover .dropdown {
      display: block !important;
      transform: scale(1) !important;
      opacity: 1 !important;
    }

    .dropdown-item {
      padding: 12px 20px !important;
      color: var(--text-primary) !important;
      text-decoration: none !important;
      display: flex !important;
      align-items: center !important;
      gap: 10px !important;
      transition: all var(--transition-speed) ease !important;
    }

    .dropdown-item i {
      font-size: 16px !important;
      color: var(--primary-blue) !important;
      transition: transform var(--transition-speed) ease !important;
    }

    .dropdown-item:hover {
      background-color: var(--light-blue) !important;
      color: var(--primary-blue) !important;
      border-radius: var(--border-radius) !important;
    }

    .dropdown-item:hover i {
      transform: translateX(3px) !important;
    }

    .sidebar {
      width: 250px;
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(10px);
      height: calc(100vh - 60px);
      position: fixed;
      left: 0;
      top: 60px;
      box-shadow: 2px 0 12px rgba(0, 0, 0, 0.08);
      padding: 20px 0;
      transition: all var(--transition-speed) ease;
      z-index: 999;
    }

    .sidebar-item {
      padding: 12px 25px;
      color: var(--text-secondary);
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 12px;
      transition: all var(--transition-speed) ease;
      margin: 4px 0;
      border-radius: 0 var(--border-radius) var(--border-radius) 0;
      margin-right: 15px;
      position: relative;
      height: 48px;
      line-height: 24px;
    }

    .sidebar-item i {
      font-size: 18px;
      color: var(--primary-blue);
      transition: all var(--transition-speed) ease;
      width: 24px;
      text-align: center;
      opacity: 0.8;
      display: inline-block !important;
    }

    .sidebar-item:hover {
      background-color: var(--light-blue);
      color: var(--primary-blue);
      transform: translateX(5px);
    }

    .sidebar-item:hover i {
      transform: scale(1.1);
      opacity: 1;
    }

    .sidebar-item.active {
      background-color: var(--primary-blue);
      color: white;
    }

    .sidebar-item.active i {
      color: white;
      opacity: 1;
    }

    .main-content {
      margin-left: 250px;
      padding: 20px;
      margin-top: 60px;
      transition: margin-left var(--transition-speed) ease;
    }

    .card {
      background: rgba(255, 255, 255, 0.98);
      backdrop-filter: blur(10px);
      border-radius: var(--border-radius);
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      padding: 20px;
      margin-bottom: 20px;
      transition: all var(--transition-speed) ease;
    }

    .card:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 24px rgba(0, 0, 0, 0.12);
    }

    .card-title {
      font-size: 18px;
      font-weight: bold;
      margin-bottom: 15px;
      color: var(--text-primary);
      display: flex;
      align-items: center;
      gap: 10px;
    }

    .card-title i {
      color: var(--primary-blue);
      font-size: 20px;
      transition: transform var(--transition-speed) ease;
    }

    .card:hover .card-title i {
      transform: rotate(15deg);
    }

    /* 添加一个透明的区域来保持下拉菜单的显示 */
    .user-info::after {
      content: '';
      position: absolute;
      top: 100%;
      left: 0;
      width: 100%;
      height: 20px;
      background: transparent;
    }

    /* 响应式设计 */
    @media (max-width: 768px) {
      .sidebar {
        transform: translateX(-100%);
      }

      .sidebar.show {
        transform: translateX(0);
      }

      .main-content {
        margin-left: 0;
      }
    }

    .analysis-item {
      padding: 0 !important;
      margin: 4px 0;
      position: relative;
    }

    .analysis-toggle {
      display: flex;
      align-items: center;
      gap: 12px;
      color: var(--text-secondary);
      text-decoration: none;
      width: 100%;
      padding: 12px 25px;
      transition: all var(--transition-speed) ease;
      cursor: pointer;
      border-radius: 0 var(--border-radius) var(--border-radius) 0;
      margin-right: 15px;
      height: 48px;
      line-height: 24px;
    }

    .analysis-toggle:hover {
      color: var(--primary-blue);
      background-color: var(--light-blue);
      transform: translateX(5px);
    }

    .analysis-toggle i:first-child {
      font-size: 18px;
      color: var(--primary-blue);
      width: 24px;
      text-align: center;
      opacity: 0.8;
      transition: all var(--transition-speed) ease;
    }

    .analysis-toggle:hover i:first-child {
      transform: scale(1.1);
      opacity: 1;
    }

    .toggle-icon {
      margin-left: auto;
      font-size: 12px;
      transition: transform var(--transition-speed) ease;
      color: var(--text-secondary);
    }

    .analysis-item.active .toggle-icon {
      transform: rotate(180deg);
    }

    .analysis-item.active .analysis-toggle {
      background-color: var(--primary-blue);
      color: white;
    }

    .analysis-item.active .analysis-toggle i:first-child {
      color: white;
      opacity: 1;
    }

    .analysis-submenu {
      display: none;
      background-color: rgba(0, 0, 0, 0.02);
      border-radius: 0 0 var(--border-radius) var(--border-radius);
      overflow: hidden;
      position: relative;
      margin: 0 15px 0 0;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    }

    .analysis-item.active .analysis-submenu {
      display: block;
    }

    .submenu-item {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 25px;
      color: var(--text-secondary);
      text-decoration: none;
      transition: all var(--transition-speed) ease;
      font-size: 0.95em;
      background-color: white;
      border-radius: 0 var(--border-radius) var(--border-radius) 0;
      height: 44px;
      line-height: 24px;
    }

    .submenu-item i {
      font-size: 16px;
      color: var(--primary-blue);
      opacity: 0.8;
      transition: all var(--transition-speed) ease;
      width: 24px;
      text-align: center;
    }

    .submenu-item:hover {
      color: var(--primary-blue);
      background-color: var(--light-blue);
      transform: translateX(5px);
    }

    .submenu-item:hover i {
      opacity: 1;
      transform: scale(1.1);
    }

    .submenu-item.active {
      color: var(--primary-blue);
      background-color: var(--light-blue);
    }

    .submenu-item.active i {
      opacity: 1;
    }

    /* 添加 JavaScript 交互样式 */
    .analysis-item.show .analysis-submenu {
      display: block;
    }

    .analysis-item.show .toggle-icon {
      transform: rotate(180deg);
    }
  </style>
  {% block styles %}{% endblock %}
</head>

<body>
  <nav class="navbar">
    <div class="system-name">
      <a href="{{ url_for('teacher_auth.index') }}" style="text-decoration: none; color: white;">
        <i class="fas fa-graduation-cap"></i>
        期末成绩登记统计分析系统
      </a>
    </div>

    {% if current_user.is_authenticated %}
    <div class="user-info">
      <div class="avatar">
        {% if registration and registration.avatar %}
        <img src="{{ registration.avatar }}" alt="头像">
        {% else %}
        <i class="fas fa-user"></i>
        {% endif %}
      </div>
      <div class="user-name">
        <span>{{ current_user.name }}</span>
        <span class="dropdown-arrow">▼</span>
      </div>
      <div class="dropdown">
        <a href="{{ url_for('teacher_profile.profile') }}" class="dropdown-item">
          <i class="fas fa-user"></i>
          <span>个人信息</span>
        </a>
        <a href="{{ url_for('auth.logout') }}" class="dropdown-item">
          <i class="fas fa-sign-out-alt"></i>
          <span>退出登录</span>
        </a>
      </div>
    </div>
    {% endif %}
  </nav>

  <div class="sidebar">
    <a href="{{ url_for('teacher_auth.index') }}"
      class="sidebar-item {% if request.endpoint == 'teacher_auth.index' %}active{% endif %}">
      <i class="fas fa-home"></i>
      <span>首页</span>
    </a>
    <a href="{{ url_for('teacher_class.classes') }}"
      class="sidebar-item {% if request.endpoint == 'teacher_class.classes' %}active{% endif %}">
      <i class="fas fa-users"></i>
      <span>班级管理</span>
    </a>
    <a href="{{ url_for('teacher_course.courses') }}"
      class="sidebar-item {% if request.endpoint == 'teacher_course.courses' %}active{% endif %}">
      <i class="fas fa-book"></i>
      <span>课程管理</span>
    </a>
    <a href="{{ url_for('teacher_student.students') }}"
      class="sidebar-item {% if request.endpoint == 'teacher_student.students' %}active{% endif %}">
      <i class="fas fa-user-graduate"></i>
      <span>学生管理</span>
    </a>
    <a href="{{ url_for('teacher_grade.grades') }}"
      class="sidebar-item {% if request.endpoint == 'teacher_grade.grades' %}active{% endif %}">
      <i class="fas fa-chart-bar"></i>
      <span>成绩管理</span>
    </a>
    <div class="analysis-item {% if request.endpoint.startswith('tea_analysis.') %}active{% endif %}">
      <div class="analysis-toggle">
        <i class="fas fa-chart-line"></i>
        <span>统计分析</span>
        <i class="fas fa-chevron-down toggle-icon"></i>
      </div>
      <div class="analysis-submenu">
        <a href="{{ url_for('tea_analysis.distribution') }}"
          class="submenu-item {% if request.endpoint == 'tea_analysis.distribution' %}active{% endif %}">
          <i class="fas fa-chart-pie"></i>
          <span>成绩分布分析</span>
        </a>
        <a href="{{ url_for('tea_analysis.comparison') }}"
          class="submenu-item {% if request.endpoint == 'tea_analysis.comparison' %}active{% endif %}">
          <i class="fas fa-chart-bar"></i>
          <span>班级对比分析</span>
        </a>
        <a href="{{ url_for('tea_analysis.trend') }}"
          class="submenu-item {% if request.endpoint == 'tea_analysis.trend' %}active{% endif %}">
          <i class="fas fa-chart-line"></i>
          <span>成绩趋势分析</span>
        </a>
      </div>
    </div>
  </div>

  <div class="main-content">
    {% block content %}{% endblock %}
  </div>

  {% block scripts %}{% endblock %}

  <script>
    document.addEventListener('DOMContentLoaded', function () {
      const analysisItem = document.querySelector('.analysis-item');
      const analysisToggle = document.querySelector('.analysis-toggle');

      // 如果当前页面是分析相关的页面，自动展开菜单
      if (window.location.pathname.includes('/analysis/')) {
        analysisItem.classList.add('active');
      }

      analysisToggle.addEventListener('click', function (e) {
        e.preventDefault();
        analysisItem.classList.toggle('active');
      });

      // 点击其他地方关闭菜单
      document.addEventListener('click', function (e) {
        if (!analysisItem.contains(e.target)) {
          analysisItem.classList.remove('active');
        }
      });
    });
  </script>
</body>

</html>